<template>
	<el-row class="Row">
		<el-input placeholder="请输入门店名称" v-model="outletName"></el-input>
		<el-input placeholder="请输入商品名" v-model="wareName"></el-input>
		<el-input placeholder="请输入销售时间" v-model="sellTime"></el-input>
		<el-input placeholder="请输入用户名" v-model="userName"></el-input>
		<el-button class="searchBtn" type='info' :icon="Search" @click="search">搜索</el-button>
	</el-row>
	<el-table :data="newRes">
		<el-table-column label="门店名" prop="outletName"></el-table-column>
		<el-table-column label="商品名称" prop="wareName"></el-table-column>
		<el-table-column label="销售时间" prop="sellTime"></el-table-column>
		<el-table-column class="userName" label="用户信息" prop="userName">
			<template #default="scope">
				<span class="feeds" @click="userDetail(scope.row)">{{scope.row.userName}}</span>
			</template>
	<!-- 		<template #default="scope">
				<a href="../user" v-for="x in newRes " @click="userDetail(scope.row)">{{x.userName}}</a>
			</template> -->
		</el-table-column>
		<el-table-column label="商品价格" prop="price"></el-table-column>
		<el-table-column label="会员价格" prop="vipPrice"></el-table-column>
		<el-table-column label="实际价格" prop="actPrice"></el-table-column>
		<el-table-column label="备注" prop="sellDescr"></el-table-column>
	</el-table>
	<el-pagination
		layout="prev,pager,next"
		:page-size="pageSize"
		:page-count="pageCount"
		v-model:current-page="pageIndex"
		@current-change="changePage"
	></el-pagination>
</template>

<script setup lang="ts">
	import {Search,ArrowDown} from '@element-plus/icons-vue'
	import {getSalesHistory} from "../api/lqy/index"
	import { ref } from 'vue'
	// 路由
	import { useRouter ,useRoute} from 'vue-router';
	//page size wareName
	let page=ref("2")
	let size=ref("5")
	let newRes=ref([])
	let pageIndex=ref(1)
	let pageSize=ref(5)
	let pageCount=ref()
	let outletName=ref() //门店名
	let wareName=ref() //商品名
	let sellTime=ref() //销售时间
	let userName=ref() //用户名
	const router=useRouter()
	//时间处理
	const times=()=>{
		newRes.value.forEach(v => {
			let str = v.sellTime + ""
			v.sellTime = str.substring(0, 10)
		})
	}
	//获取销售记录
	const getSales=async()=>{
		let res =await getSalesHistory({
			page:page.value,
			size:size.value,

		})
		console.log(res)
		newRes.value=res.sells
		console.log(newRes.value)
		pageCount.value=Math.ceil(res.sells.length/pageSize.value)
		times()
	}
	getSales()
	const changePage = (page) => {
		pageIndex.value = page;
		getSales()	
	}
	//搜索
	const search= async ()=>{
		console.log("执行了")
		let res = await getSalesHistory({
			page:page.value,
			size:size.value,
			outletName:outletName.value,
			wareName:wareName.value,
			sellTime:sellTime.value,
			userName:userName.value,
		})
	}
	//存储本地信息
	const userDetail = (v=>{
		sessionStorage.setItem('user',JSON.stringify(v))
		router.push("../user")
	})
</script>

<style scoped>
	.Row .el-input{
		width: 15%;
		margin-right: 20px;
	}
	.searchBtn{
		background-color: #106ab1;
		border: none;
	}
	.el-pagination{
	        --el-pagination-bg-color:none;
	        --el-pagination-button-disabled-bg-color:none;
	        justify-content: center;
	}
	.feeds{
		text-decoration: underline;
		cursor: pointer;
	}
</style>